<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="消息" name="messageTab">
      <div class="yy-page-container">
        <KingTable ref="kingTable" :tableOptions="_tableOptions"> </KingTable>
      </div>
    </el-tab-pane>
    <el-tab-pane label="流程" name="processTab">
      <el-button v-show="isShowCancelBtn" :icon="Check" type="warning" @click="handleCancel"> 撤销 </el-button>
      <el-button v-show="isShowPassBtn" :icon="Check" type="warning" @click="handlePass"> 通过 </el-button>
      <el-button v-show="isShowRejectBtn" :icon="Close" type="warning" @click="handleReject"> 退回 </el-button>
      <div>
        <workflow-task :key="processKey" ref="processRef" :bid="bid" :btype="btype" />
        <teleport to="body">
          <passDialog :key="Math.random()" ref="passDailogRef" :bid="bid" :burl="burl" @call-back-pass-node="callBackPassNode" />
          <rejectDialog
            :key="Math.random()"
            ref="rejectDailogRef"
            :bid="bid"
            :burl="burl"
            @call-back-reject-node="callBackRejectNode"
          />
        </teleport>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="tsx" name="BussProcess">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import { postRequest } from "@/api/mains";
import workflowTask from "@/components/workflow/workflowTask.vue";
import rejectDialog from "@/components/workflow/buss/rejectDialog.vue";
import passDialog from "@/components/workflow/buss/passDialog.vue";
import { Check, Close } from "@element-plus/icons-vue";
import { ElLoading } from "element-plus";
import { confirm, succMsg, failMsg } from "@/utils/MessageUtils";

const props = defineProps({
  bid: {
    type: String,
    default: () => "",
    required: true
  },
  btype: {
    type: String,
    default: () => "",
    required: true
  },
  burl: {
    type: String,
    default: () => "",
    required: true
  }
});

const processRef = ref();
const rejectDailogRef = ref();
const passDailogRef = ref();

const activeName = ref("processTab"); //默认激活tab页
const isShowPassBtn = false;
const isShowRejectBtn = false;
const isShowCancelBtn = false;
// const bid = ref("");
// const btype = ref("");
// const burl = ref("");
const processKey = ref("");

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1, title: "", nodename: "", bid: "", btype: "", EQ_iscancel: "0", sorts: "cts@desc" });

// 表格配置项
const _tableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "nodename",
    label: "节点名称",
    width: 180
  },
  {
    prop: "btype",
    label: "单据类型",
    width: 180
  },
  {
    prop: "title",
    label: "标题",
    width: 180,
    overflow: true
  },
  {
    prop: "sendername",
    label: "发送人",
    width: 100
  },
  {
    prop: "receivername",
    label: "接收人",
    width: 180
  },
  {
    prop: "receivetime",
    label: "接收时间",
    width: 160
  },
  {
    prop: "dealresult",
    label: "处理结果",
    width: 180
  },
  {
    prop: "dealtime",
    label: "处理时间",
    width: 160
  }
];

const _searchCols = [
  {
    prop: "nodename",
    label: "节点名称",
    width: 100,
    el: "input"
  },
  {
    prop: "title",
    label: "标题",
    width: 100,
    el: "input"
  }
];

const _tableOptions = {
  title: "流程管理",
  queryUrl: "system/message/queryBillMessage",
  operUrl: "system/message",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

//通过流程
const handlePass = () => {
  passDailogRef.value.showPassDialog();
};

//退回流程
const handleReject = () => {
  rejectDailogRef.value.showRejectDialog();
};

//撤销流程
const handleCancel = async () => {
  confirm("确定要撤销吗?", async function () {
    const loading = ElLoading.service({
      lock: true,
      text: "提交中，请稍候...",
      background: "rgba(0, 0, 0, 0.7)"
    });
    const responseData = await postRequest(`${props.burl}+"/cancelFlow/"+${props.bid}`, {});
    loading.close();
    if (responseData.code == 200) {
      succMsg(responseData.msg);
      processKey.value = Math.random().toString();
      await fetchTableData();
    } else {
      failMsg(responseData.msg);
    }
  });
};

const callBackPassNode = async (targetNodeCode: any, dealresult: string, selApprovers: any) => {
  const postData = { bid: "", targetNodeCode, dealresult, selApprovers };
  postData.bid = props.bid;
  postData.targetNodeCode = targetNodeCode;
  postData.dealresult = dealresult;
  postData.selApprovers = selApprovers._rawValue;

  const loading = ElLoading.service({
    lock: true,
    text: "提交中，请稍候...",
    background: "rgba(0, 0, 0, 0.7)"
  });
  const responseData = await postRequest(props.burl + "/completeFlow", postData);
  loading.close();
  if (responseData.code == 200) {
    succMsg(responseData.msg);
    processKey.value = Math.random().toString();
    await fetchTableData();
  } else {
    failMsg(responseData.msg);
  }
};

const callBackRejectNode = async (targetNodeCode: any, dealresult: string) => {
  const postData = { bid: "", targetNodeCode, dealresult };
  postData.bid = props.bid;
  postData.targetNodeCode = targetNodeCode;
  postData.dealresult = dealresult;

  const loading = ElLoading.service({
    lock: true,
    text: "提交中，请稍候...",
    background: "rgba(0, 0, 0, 0.7)"
  });
  const responseData = await postRequest(props.burl + "/rejectFlow", postData);
  loading.close();
  if (responseData.code == 200) {
    succMsg(responseData.msg);
    processKey.value = Math.random().toString();
    await fetchTableData();
  } else {
    failMsg(responseData.msg);
  }
};

const initData = () => {
  _initParam.bid = props.bid;
  _initParam.btype = props.btype;

  fetchTableData();
};

watch(
  () => props.bid,
  newVal => {
    if (newVal) {
      initData();
    }
  },
  {
    immediate: true
  }
);

defineExpose({
  handlePass,
  handleReject,
  handleCancel
});
</script>
<style lang="scss" scoped>
.yy-page-container {
  height: 70vh;
}
</style>
